/**
 * @file
 * @author ruanairuo(ruanairuo@baijia.com)
 * @date 2020-01-07
 */
import React from 'react';
import {Card, Col, Button, Divider, Spin, Tooltip} from 'antd';
import {InfoCircleOutlined, DownloadOutlined, ReloadOutlined} from '@ant-design/icons';
import '../common.styl';

export default function CommonCard(props) {
    const {
        title,
        content,
        span,
        loading,
        onDownload,
        onDetail,
        showBack,
        onBack,
        height,
        cardId,
        showBtn = true
    } = props;

    // 接口需要的数据一样，但是还是写三个，任性
    const handleDetail = () => {
        typeof onDetail === 'function' && onDetail({
            unitName: title,
            unitId: cardId,
        });
    };

    const handleBack = () => {
        typeof onBack === 'function' && onBack({
            unitName: title,
            unitId: cardId,
        });
    };

    const handleDownload = () => {
        typeof onDownload === 'function' && onDownload({
            unitName: title,
            unitId: cardId,
        });
    };

    return (
        <Col span={span}>
            <Card
                title={title || ' '}
                className="common-card"
                extra={showBtn ? (
                    <span className="detail-download">
                        {
                            showBack ? (
                                <>
                                    <Button
                                        type="link"
                                        onClick={handleBack}
                                        icon={<ReloadOutlined />}
                                    />
                                </>
                            ) : null
                        }
                        {onDetail && (
                            <>
                                <Tooltip title="查看明细">
                                    <Button
                                        type="link"
                                        onClick={handleDetail}
                                        icon={<InfoCircleOutlined />}
                                    />
                                </Tooltip>
                            </>
                        )}
                        {onDownload && (
                            <Tooltip title="下载">
                                <Button
                                    type="link"
                                    onClick={handleDownload}
                                    icon={<DownloadOutlined />}
                                />
                            </Tooltip>
                        )}
                    </span>
                ) : null}
            >
                <Spin spinning={loading}>
                    <div
                        className="common-card-container"
                        style={{minHeight: height || 150, width: '100%'}}
                    >
                        <div className="common-card-content" style={{width: '100%'}}>
                            {content}
                        </div>
                    </div>
                </Spin>
            </Card>
        </Col>
    );
}
